<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product List</title>
</head>
<body>

<h1>Welcome to My App</h1>
<p>Explore the features of our awesome app.</p>

<ul>
    <li><a href="/about">About Us</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact Us</a></li>
</ul>
<h2>Product List</h2>

<ul id="product-list">
    <!-- Product items will be added here dynamically -->
</ul>

<script>
    // JavaScript to fetch product data and update the product list
    fetch('/products')
        .then(response => response.json())
        .then(data => {
            const productList = document.getElementById('product-list');
            data.forEach(product => {
                const listItem = document.createElement('li');
                listItem.innerHTML = `<a href="/products/${product.id}">${product.name}</a> - Price: ${product.price}`;
                productList.appendChild(listItem);
            });
        })
        .catch(error => {
            console.error('Error fetching product data:', error);
        });
</script>
</body>
</html>
